<template>
  <div class="center_bottom">
    <div class="echarts_bottom">
      <div class="cpntent">
        <p class="titles">电站总数(个)</p>
        <div class="num-contain">
          <div
              :class="!isNaN(item) ? 'num-item' : 'num-item num-item1'"
              v-for="(item, index) in bmsStation"
              :key="index"
          >
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="echarts_bottom">
      <div class="cpntent">
        <p class="titles">总装机功率(MW)</p>
        <div class="num-contain">
          <div
              :class="!isNaN(item) ? 'num-item' : 'num-item num-item1'"
              v-for="(item, index) in bmsPVal"
              :key="index"
          >
            <span>{{ item }}</span>
          </div>
        </div>
        <!-- <div class="num-contain">
          <div class="num-item">
            <span>1</span>
          </div>
          <div class="num-item num-item1">
            <span>.</span>
          </div>
          <div class="num-item">
            <span>9</span>
          </div>
       </div> -->
      </div>
    </div>
    <div class="echarts_bottom">
      <div class="cpntent">
        <p class="titles">总装机容量(MWh)</p>
        <div class="num-contain">
          <div
              :class="!isNaN(item) ? 'num-item' : 'num-item num-item1'"
              v-for="(item, index) in bmsCapacity"
              :key="index"
          >
            <span>{{ item }}</span>
          </div>
        </div>
        <!-- <div class="num-contain">
          <div class="num-item">
            <span>1</span>
          </div>
          <div class="num-item num-item1">
            <span>.</span>
          </div>
          <div class="num-item">
            <span>8</span>
          </div>
          <div class="num-item">
            <span>8</span>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import {findDataByDevIdAndName} from '@/api/modules/home.js'

export default {
  data() {
    return {
      sjlist: [],
      bmsStation: [],
      bmsPVal: [],
      bmsCapacity: [],
    }
  },
  mounted() {
    findDataByDevIdAndName({
      devId: this.$store.state.oldUserInfo.companyId,
      sampleName: "quantity_charged,quantity_discharged",
    }).then((res) => {
      if (res.code == 200) {
        this.sjlist = res.data
        // this.bmsStation = (1.222).toString().split('')
        this.bmsStation = this.sjlist.bmsStation.toString().split('')
        this.bmsPVal = this.sjlist.bmsPNom.toString().split('')
        this.bmsCapacity = this.sjlist.bmsCapacity.toString().split('')
      }
    })
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;

  .echarts_bottom {
    width: 260px;
    height: 100%;

    .cpntent {
      width: 100%;
      height: 100%;
      text-align: center;
      padding: 10px 0;

      .titles {
        font-weight: 600;
        font-size: 14px;
        color: #ffffff;
        line-height: 16px;
        margin-bottom: 15px;
      }
    }
  }
}
</style>
